<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: title + '员工',
			size: '40%',
			modal: isModal
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form
			ref="form"
			label-position="top"
			:disabled="saving"
			:model="form"
			:rules="rules"
			:key="cacheKey"
		>
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="所属事业部" prop="biz_id">
								<cl-select
									v-model="form.biz_id"
									style="width: 100%"
									placeholder="请选择事业部"
									filterable
									:disabled="type == 'edit'"
									@change="bizChange"
								>
									<el-option
										v-for="item in bizList"
										:key="item.biz_id"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="是否技师" prop="is_teacher">
								<cl-select
									v-model="form.is_teacher"
									style="width: 100%"
									placeholder="请选择是否技师"
									@change="changeIsTeacher"
								>
									<el-option label="是" :value="1" />
									<el-option label="否" :value="0" />
								</cl-select>
							</el-form-item>
						</el-col>
						<template v-if="type == 'add'">
							<div
								class="flex"
								style="width: 100%"
								v-for="(item, index) in form.user_list"
								:key="item.uuid"
							>
								<el-col :span="12">
									<el-form-item
										:label="index == 0 ? '员工名称' : ''"
										:prop="`user_list.${index}.user_name`"
										:rules="rules.user_name"
									>
										<el-input
											v-model="item.user_name"
											placeholder="请输入员工名称"
										/>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<div class="flex">
										<cl-flex1 class="mr-1">
											<el-form-item
												:label="index == 0 ? '联系电话' : ''"
												:prop="`user_list.${index}.mobile`"
												:rules="rules.mobile"
											>
												<el-input
													v-model="item.mobile"
													placeholder="请输入联系电话"
													maxlength="11"
												/>
											</el-form-item>
										</cl-flex1>
										<div>
											<div style="height: 28px" v-if="index == 0" />
											<el-button
												icon="el-icon-plus"
												@click="addUser"
												v-if="form.user_list.length == index + 1"
											/>
											<el-button
												icon="el-icon-minus"
												v-else
												@click="delUser(index)"
											/>
										</div>
									</div>
								</el-col>
							</div>
						</template>
						<template v-else>
							<el-col :span="12">
								<el-form-item label="员工名称" prop="请输入员工名称">
									<el-input
										v-model="form.user_name"
										placeholder="请输入员工名称"
									/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="联系电话" prop="mobile">
									<el-input
										v-model="form.mobile"
										placeholder="请输入联系电话"
										maxlength="11"
									/>
								</el-form-item>
							</el-col>
						</template>
						<el-col :span="12">
							<el-form-item label="工作手机号" prop="work_mobile">
								<el-input
									v-model="form.work_mobile"
									placeholder="请输入联系电话"
									maxlength="11"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="员工性别" prop="user_sex">
								<cl-select
									v-model="form.user_sex"
									style="width: 100%"
									placeholder="请选择员工性别"
								>
									<el-option label="男" :value="1" />
									<el-option label="女" :value="2" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="form.is_teacher == 1" key="shop">
							<el-form-item label="所属门店" prop="dept_id">
								<cl-shop-select
									style="width: 100%"
									clearable
									filterable
									v-model="form.dept_id"
									:biz_id="form.biz_id"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-else key="dept">
							<el-form-item label="所属部门" prop="dept_ids">
								<el-cascader
									style="width: 100%"
									clearable
									v-model="form.dept_ids"
									:options="deptList"
									:props="{
										checkStrictly: false,
										value: 'dept_id',
										label: 'dept_name'
									}"
									filterable
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="权限组" prop="ro_id">
								<cl-select
									v-model="form.ro_id"
									placeholder="请选择权限组"
									filterable
									style="width: 100%"
								>
									<el-option
										v-for="item in roleList"
										:key="item.ro_id"
										:label="item.ro_name"
										:value="item.ro_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="form.is_teacher == 1">
							<el-form-item label="技师岗位" prop="teacher_post">
								<cl-select
									v-model="form.teacher_post"
									style="width: 100%"
									placeholder="请选择技师岗位"
								>
									<el-option
										v-for="item in teacherPostList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="form.is_teacher == 1">
							<el-form-item label="是否为服务老师" prop="service_teacher">
								<cl-select
									v-model="form.service_teacher"
									style="width: 100%"
									placeholder="请选择"
								>
									<el-option label="是" :value="1" />
									<el-option label="否" :value="0" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="form.is_teacher == 1">
							<el-form-item label="是否接待新客" prop="meet_new">
								<cl-select
									v-model="form.meet_new"
									style="width: 100%"
									placeholder="请选择是否接待新客"
								>
									<el-option label="是" :value="1" />
									<el-option label="否" :value="0" />
								</cl-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
	import threeLevel from "@/assets/countryLevel3";
	import constant from "@/constant";
	import { validate } from "@/utils/validate";
	import { uuid } from "@/utils";
	import { delEmptyChildren } from "@/utils";
	import { last } from "cl-admin/utils";
	export default {
		name: "cl-staff-form",
		props: {
			// 是否需要遮罩层
			isModal: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				addressLevel: threeLevel,
				deptTypeList: constant.DEPT_TYPE,
				cacheKey: 1,
				form: {
					user_id: "",
					user_list: [],
					user_name: "", // 名称
					mobile: "", // 手机号码
					user_sex: 1, //性别
					is_teacher: 0, //是否技师
					service_teacher: 1,
					teacher_post: 1, //技师岗位
					biz_id: "", //事业部id
					dept_id: "", //部门id
					dept_ids: [],
					ro_id: "", //权限id
					status: "",
					work_mobile: "",
					meet_new: 1
				},
				rules: {
					user_name: [{ required: true, message: "请填写员工名称" }],
					mobile: [
						{ required: true, message: "请填写联系电话" },
						{ pattern: validate.mobile, message: "联系电话格式不正确" }
					],
					work_mobile: [{ pattern: validate.mobile, message: "联系电话格式不正确" }],
					biz_id: [{ required: true, message: "请选择所属事业部" }],
					dept_ids: [{ required: true, message: "请选择所属部门" }],
					dept_id: [{ required: true, message: "请选择所属门店" }],
					ro_id: [{ required: true, message: "请选择权限组" }]
				},
				saving: false,
				type: "add",
				deptList: [], //部门
				roleList: [], //权限数据
				// 技师岗位
				teacherPostList: constant.TEACHER_POST_LIST
			};
		},
		computed: {
			title() {
				let title = "";
				switch (this.type) {
					case "add":
						title = "新增";
						break;
					case "edit":
						title = "修改";
						break;
					case "copy":
						title = "复制";
						break;
				}
				return title;
			},
			teacherDeptList() {
				const { is_teacher } = this.form;
				return is_teacher ? this.shopList : this.deptList;
			},
			bizRefData() {
				const { biz_id } = this.form;
				return this.getBizRefData(biz_id);
			},
			shopList() {
				const { shop } = this.bizRefData;
				return delEmptyChildren(shop);
			}
		},
		created() {
			this.form.biz_id = this.getCurrBiz(true);
			this.bizChange();
		},
		methods: {
			open(type = "add", data = {}) {
				this.type = type;
				this.$refs.drawer.create(() => {
					this.$refs.form.resetFields();
					if (type == "add") {
						this.addUser();
					}
					if (type != "add") {
						Object.keys(this.form).forEach((key) => {
							data[key] != undefined && (this.form[key] = data[key]);
						});

						// console.info("data.teacher_post1122", data.teacher_post);
						// console.info("data.teacher_post", this.form);

						this.form.dept_ids =
							data.dept_parent_id == 0
								? [data.dept_id]
								: [data.dept_parent_id, data.dept_id];
					}
					this.bizChange();
				});
			},
			close() {
				this.$refs.drawer.close();
			},
			reset() {
				this.saving = false;
				this.cacheKey++;
				this.$resetFields(this.form);
				this.form = {
					...this.form,
					user_list: [],
					user_sex: 1, //性别
					is_teacher: 0, //是否技师
					teacher_post: 1, //技师岗位
					service_teacher: 1,
					meet_new: 1,
					biz_id: this.getCurrBiz(true) //事业部id
				};
				// this.$nextTick(() => {
				// 	this.$refs.form.resetFields();
				// });
			},
			submit() {
				this.$refs.form.validate(async (valid, errors) => {
					this.showFormErr(errors);
					if (!valid) return;
					this.saving = true;
					const { type } = this;
					const { user_list, user_id, biz_id, dept_ids, ...args } = this.form;
					let form = { ...args, biz_id };
					if (type == "add") {
						let user_name_list = [];
						let mobile_list = [];
						user_list.forEach((v) => {
							user_name_list.push(v.user_name);
							mobile_list.push(v.mobile);
						});
						form.user_name = user_name_list.join();
						form.mobile = mobile_list.join();
					}
					if (type == "edit") {
						form.user_id = user_id;
					}
					if (form.is_teacher != 1) {
						form.dept_id = last(dept_ids);
					}
					const staffinfo = await this.$service.user[type == "edit" ? "update" : "add"](
						form
					).done(() => {
						this.saving = false;
					});
					this.$message.success("操作成功");
					let userId = type != "edit" ? staffinfo.user_id : "";
					this.$emit("confirm", biz_id, userId, type == "edit" ? false : true);
					this.close();
				});
			},
			// 事业部
			bizChange() {
				this.getTeacherDeptList();
				this.getRoleList();
			},
			changeIsTeacher() {
				this.form.dept_ids = [];
				this.form.dept_id = "";
				this.form.ro_id = "";
				this.getTeacherDeptList();
				this.getRoleList();
			},
			getTeacherDeptList() {
				const { is_teacher } = this.form;
				is_teacher ? this.getShopList() : this.getDeptList();
			},
			// 部门
			async getDeptList() {
				const { biz_id } = this.form;
				this.deptList = [];
				if (!biz_id) return;
				const data = await this.$service.dept.list({
					parent_id: 0,
					is_store: 0,
					biz_id
				});
				this.deptList = delEmptyChildren(data);
			},
			// 门店
			async getShopList() {
				const { biz_id } = this.form;
				await this.getBizRefShop(biz_id);
			},
			// 权限组列表
			async getRoleList() {
				const { biz_id, is_teacher } = this.form;
				this.roleList = [];
				const data = await this.$service.role.list({
					status: 1,
					biz_id,
					is_teacher
				});
				this.roleList = (data || []).filter((v) => v.is_super != 1);
			},
			addUser() {
				this.form.user_list.push({
					uuid: uuid(),
					user_name: "",
					mobile: ""
				});
			},
			delUser(index) {
				this.form.user_list.splice(index, 1);
			}
		}
	};
</script>
